<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    ; (_ => {
      class Subscribe {
        pond = {}
        on(name, fn) {
          if (!this.pond.hasOwnProperty(name)) this.pond[name] = []
          !this.pond[name].includes(fn) && this.pond[name].push(fn)
        }
        off(name, fn) {
          if (!this.pond[name]) return
          this.pond[name] = this.pond[name].filter(item => item !== fn)
        }
        emit(name, ...params) {
          console.log(this.pond)
          if (!this.pond[name]) return
          this.pond[name].map(fn => fn.apply(this, params))
        }
      }
      window.Subscribe = Subscribe
    })();

    ; (function () {
      var pond = {}
      var on = function on(name, fn) {
        if (!pond[name]) pond[name] = []
        pond[name].push(fn)
      }
      var off = function off(name, fn) {
        var event = pond[name]
        if (!event) return
        for (var i = 0; i < event.length; i++) {
          if (event[i] === fn) pond[name].splice(i, 1)
        }
      }
      var emit = function emit(name) {
        var params = Array.prototype.slice.call(arguments, 1)
        var event = pond[name]
        if (!event) return
        for (var i = 0; i < event.length; i++) {
          event[i].apply(this, params)
        }
      }

      var Sub = function Sub() {
        return { on, off, emit }
      }
      window.Sub = Sub
    })()

    let fn1 = (name, age) => { console.log('fn1', name, age) }
    let fn2 = (name) => { console.log('fn2', name) }
    let fn3 = (name) => { console.log('fn3', name) }
    let fn4 = (name) => { console.log('fn4', name) }
    let sub1 = new Sub

    sub1.on('AAA', fn1)
    sub1.on('AAA', fn2)
    sub1.on('AAA', fn3)
    sub1.off('AAA', fn2)
    sub1.on('AAA', fn2)
    sub1.on('BBB', fn2)
    sub1.emit('AAA', 'biubiu', 18)



    // let fn1 = (name) => { console.log('fn1', name) }
    // let fn2 = (name) => { console.log('fn2', name) }
    // let sub1 = new Subscribe
    // sub1.on('AAA', fn1)
    // sub1.on('AAA', fn2)
    // sub1.on('AAA', fn2)
    // sub1.on('BBB', fn2)
    // sub1.emit('AAA', 'biubiu')

    // {
    //   "AAA":[
    //     fn1,
    //     fn2
    //   ],
    //   'BBB':[
    //     fn1,
    //     fn2
    //   ]
    // }


  </script>
</body>

</html>